<template>
    <div class="app-container">
<!--    考试设置    -->
        <el-container>
            <el-aside width="200px">防作弊设置</el-aside>
            <el-main>
                <div class="div-margin">
                    <el-checkbox v-model="examSettingForm.isCut" true-label="0" false-label="1" ></el-checkbox>
                    <span style="padding-left: 5px;">允许考生切换考试页面</span>
                    <el-input-number size="mini" style="width: 35px;padding: 0 0 0 0"
                                     :min="1" :max="10"
                                     v-model="examSettingForm.cutNumber"
                                     :controls="false"></el-input-number>
                    <span>次，超过次数系统自动交卷。</span>
                </div>
                <div class="div-margin">
                    <el-checkbox v-model="examSettingForm.isOvertime" true-label="0" false-label="1"></el-checkbox>
                    <span style="padding-left: 5px;">答题时，超过</span>
                    <el-input-number size="mini" style="width: 35px;padding: 0 0 0 0"
                                     :min="1" :max="10"
                                     v-model="examSettingForm.answerOvertime"
                                     :controls="false"></el-input-number>
                    <span>分钟无操作，系统自动交卷。</span>
                </div>
                <div class="div-margin">
                    <el-checkbox v-model="examSettingForm.isBan" true-label="0" false-label="1"></el-checkbox>
                    <span style="padding-left: 5px;">禁止考生复制、粘贴、剪切</span>
                </div>
                <div class="div-margin">
                    <el-checkbox v-model="examSettingForm.questionDisorder" true-label="0" false-label="1"></el-checkbox>
                    <span style="padding-left: 5px;">试题乱序</span>
                </div>
                <div class="div-margin">
                    <el-checkbox v-model="examSettingForm.optionDisorder" true-label="0" false-label="1"></el-checkbox>
                    <span style="padding-left: 5px;">选项乱序</span>
                </div>
                <div class="div-margin">
                    <el-checkbox v-model="examSettingForm.subjectivityRandom" true-label="0" false-label="1"></el-checkbox>
                    <span style="padding-left: 5px;">主观题随机</span>
                </div>
            </el-main>
        </el-container>
        <el-container>
            <el-aside width="200px">试题设置</el-aside>
            <el-main>
                <div class="div-margin">
                    <el-checkbox v-model="examSettingForm.isAllQuestion" true-label="0" false-label="1"></el-checkbox>
                    <span style="padding-left: 5px;">答完所有题才交卷（除主观题外）</span>
                </div>
                <div class="div-margin">
                    <el-checkbox v-model="examSettingForm.isQuestionScore" true-label="0" false-label="1"></el-checkbox>
                    <span style="padding-left: 5px;">显示试题分数</span>
                </div>
            </el-main>
        </el-container>
        <el-container>
            <el-aside width="200px">成绩设置</el-aside>
            <el-main>
                <div class="div-margin">
                    <el-checkbox v-model="examSettingForm.showScore" true-label="0" false-label="1"></el-checkbox>
                    <span style="padding-left: 5px;">交卷后是否显示成绩</span>
                </div>
            </el-main>
        </el-container>
        <div class="dialog-footer" style="float:right;margin-top: 10px;">
            <el-button :loading="buttonLoading" type="primary" @click="submitForm" size="small">保 存</el-button>
            <el-button @click="cancel"  size="small">取 消</el-button>
        </div>
    </div>
</template>

<script>
    import {addExamSetting, updateExamSetting} from "@/api/exam/examSetting"
    export default {
        name: "examSettingForm",
        props: {
            // 考试设置表单信息
            examSettingForm: Object,
        },
        data() {
            return {
                // 按钮loading
                buttonLoading: false,
            }
        },
        created() {
            console.log("考试设置表单信息：",this.examSettingForm);
        },
        methods: {
            /** 提交按钮 */
            submitForm(flag) {
                this.buttonLoading = true;
                if (this.examSettingForm.settingId !== null) { // 修改考试设置
                    updateExamSetting(this.examSettingForm).then(response => {
                        if (response.retCode === '200') {
                            if (response.responseBody > 0) {
                                this.msgSuccess(response.message);
                                // 关闭对话框
                                this.$emit("cancelDialog");
                            } else {
                                this.msgWarning(response.message);
                            }
                        }
                    }).finally(() => {
                        this.buttonLoading = false;
                    });
                } else { // 新增考试计划的考试设置
                    addExamSetting(this.examSettingForm).then(response => {
                        if (response.retCode === '200') {
                            if (response.responseBody > 0) {
                                this.msgSuccess(response.message);
                                // 关闭对话框
                                this.$emit("cancelDialog");
                            } else {
                                this.msgWarning(response.message);
                            }

                        }
                    }).finally(() => {
                        this.buttonLoading = false;
                    });
                }
            },
            // 取消按钮
            cancel() {
                // 清空
                this.$emit("cancelDialog");
            },
        }
    }
</script>

<style scoped>

    /deep/ .div-margin {
        margin-bottom: 10px;
    }

    /deep/ .el-aside {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        margin-bottom: 0px;
    }

    /deep/ .el-main {
        background-color: #ffffff;
        color: #333;
        text-align: left;
    }

    /deep/ .el-input-number.is-without-controls .el-input__inner {
        padding-left: 0px;
        padding-right: 0px;
    }

</style>
